/******************************************************************************
* File description: CustomComboBox.qml
* Function: Tab切换按钮
* Current Version: 1.0.0
 *****************************************************************************/

import QtQuick 2.0

Rectangle {

    id: root

    property var model: ["选项1", "选项2", "选项3", "选项4"]
    property var icon: []       // 按钮图表

    property int index: 0                   // 当前选择的编号
    property string text: model[index]      // 当前选择的文本

    property int direct: 0      // 排布方向 0水平 1 垂直
    property int buttonH: 40*dp     // 内部按钮尺寸
    property int buttonW: 120*dp

    color: "transparent"                // 背景色
    property real spacing: 0            // 按钮间距
    property real padding: 0            // 按钮边距
    property real leftPadding: -1       // -1表示未设置，跟随padding
    property real rightPadding: -1
    property real topPadding: -1
    property real bottomPadding: -1


    // 宽度和高度默认通过设置的按钮数和按钮尺寸计算
    width: {
        let paddingSize = (leftPadding>=0 ? leftPadding : padding) + (rightPadding>=0 ? rightPadding : padding)
        if(direct === 0){
            return paddingSize + buttonW*model.length + spacing*Math.max(0, model.length-1)
        }else{
            return paddingSize + buttonW
        }
    }

    height: {
        let paddingSize = (topPadding>=0 ? topPadding : padding) + (bottomPadding>=0 ? bottomPadding : padding)
        if(direct === 0){
            return paddingSize + buttonH
        }else{
            return paddingSize + buttonH*model.length + spacing*Math.max(0, model.length-1)
        }
    }


    // 默认样式
    property bool defaultMode1: false
    property bool defaultMode2: false


    // 内部按钮样式 (同CustomButton) =====================================================================
    // 默认时样式
    property string text_size: config.fontsize              // 文字尺寸
    property double icon_size: root.height / 4 + 8*dp       // 图标尺寸
    property bool   colorGradient: false                    // 颜色渐变
    property int    gradientDirect: 0                       // 渐变方向 0横向 1竖向
    property int    iconDirect: 0                           // Icon位置 0左 1上 2右 3下
    property int    borderline_posi: -1                     // 线条位置 0左 1上 2右 3下
    property real   borderline_width: 2*dp                  // 线条宽度

    property real   button_radius: 3*dp

    // 默认样式
    property color  button_color: "white"                                   // 背景颜色
    property color  text_color: config.reverseStepColor(button_color)       // 文字颜色
    property color  button_border: "transparent"                            // 边框颜色
    property string button_icon: ""                         // 图标 (默认无图标)
    property color  icon_color: "transparent"                          // 图标颜色 (不咋好用)
    property color  borderline_color: "transparent"         // 线条颜色
    property color  button_color_2: button_color            // 渐变时效果

    // 选中样式
    property string button_icon_select: button_icon
    property color  button_color_select: button_color
    property color  text_color_select: config.reverseStepColor(button_color_select)
    property color  button_border_select: button_border
    property color  icon_color_select: icon_color
    property color  borderline_color_select: borderline_color
    property color  button_color_2_select: button_color_2

    // 悬浮时样式
    property string button_icon_hover: button_icon
    property color  button_color_hover: config.deepColor(button_color)
    property color  text_color_hover: config.reverseStepColor(button_color_hover)
    property color  button_border_hover: button_border
    property color  icon_color_hover: icon_color
    property color  borderline_color_hover: borderline_color
    property color  button_color_2_hover: button_color_2

    // 点击样式
    property string button_icon_press: button_icon
    property color  button_color_press: button_color
    property color  text_color_press: config.reverseStepColor(button_color_press)
    property color  button_border_press: button_border
    property color  icon_color_press: icon_color
    property color  borderline_color_press: borderline_color
    property color  button_color_2_press: button_color_2

    // 禁用样式
    property string button_icon_disable: button_icon
    property color  button_color_disable: colorGradient ? "#DDDDDD" : "#F5F5F5"
    property color  text_color_disable: "#BFBFBF"
    property color  button_border_disable: "#CCCCCC"
    property color  icon_color_disable: "#CCCCCC"
    property color  borderline_color_disable: borderline_color
    property color  button_color_2_disable: "#666666"
    // 样式定义结束 ================================================================================


    Component.onCompleted: {
        if(defaultMode1){           // 主题色下划线按钮
            direct = 0
            button_color = "transparent"
            borderline_posi = 3
            borderline_color_select = config.themeColor
            text_color_hover = config.themeColor
            text_color_select = config.themeColor
        }else if(defaultMode2){     // 黑白按钮
            direct = 0
            root.color = "#EBEEF3"
            root.radius = 3*dp
            button_color = "transparent"
            button_color_select = "white"
            text_color_select = "#333333"
            padding = 2*dp
        }
    }


    Grid{
        spacing: 0

        columns: direct===0 ? model.length : 1
        x: leftPadding>=0 ? leftPadding : padding
        y: topPadding>=0 ? topPadding : padding

        Repeater{

            model: root.model.length

            CustomButton{
                height: buttonH
                width: buttonW
                title: root.model[index]
                isSelected: root.index === index

                radius                  : root. button_radius

                text_size               : root.	text_size
                icon_size               : root.	icon_size
                colorGradient           : root. colorGradient
                gradientDirect          : root. gradientDirect
                iconDirect              : root. iconDirect

                borderline_posi         : root. borderline_posi
                borderline_width        : root. borderline_width

                button_color            : root.	button_color
                text_color              : root.	text_color
                button_border           : root.	button_border
                button_icon             : root.	button_icon
                icon_color              : root.	icon_color
                borderline_color        : root.	borderline_color
                button_color_2          : root. button_color_2

                button_icon_select      : root.	button_icon_select
                button_color_select     : root.	button_color_select
                text_color_select       : root.	text_color_select
                button_border_select	: root.	button_border_select
                icon_color_select       : root.	icon_color_select
                borderline_color_select	: root.	borderline_color_select
                button_color_2_select   : root. button_color_2_select

                button_icon_hover       : root.	button_icon_hover
                button_color_hover      : root.	button_color_hover
                text_color_hover        : root.	text_color_hover
                button_border_hover     : root.	button_border_hover
                icon_color_hover        : root.	icon_color_hover
                borderline_color_hover	: root.	borderline_color_hover
                button_color_2_hover    : root. button_color_2_hover

                button_icon_press       : root.	button_icon_press
                button_color_press      : root.	button_color_press
                text_color_press        : root.	text_color_press
                button_border_press     : root.	button_border_press
                icon_color_press        : root.	icon_color_press
                borderline_color_press	: root.	borderline_color_press
                button_color_2_press    : root. button_color_2_press

                button_icon_disable     : root.	button_icon_disable
                button_color_disable	: root.	button_color_disable
                text_color_disable      : root.	text_color_disable
                button_border_disable	: root.	button_border_disable
                icon_color_disable      : root.	icon_color_disable
                borderline_color_disable: root.	borderline_color_disable
                button_color_2_disable  : root. button_color_disable

                onClicked: {
                    root.index = index
                }
            }
        }

    }


}
